<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item
        label="商品分类名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'name',
            {rules: [{ required: true, message: '请输入商品分类名称!' }]}
          ]"
          placeholder="请输入商品分类的中文名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="英文名称"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'ename',
            {rules: [{ required: true, message: '请输入商品分类英文名称!' }]}
          ]"
          placeholder="请输入商品分类的英文名称..."
        ></a-input>
      </a-form-item>
      <a-form-item
        label="产品分类序号"
        :label-col="{ span: 5 ,offset: 4}"
        :wrapper-col="{ span: 7 }"
      >
        <a-input
          v-decorator="[
            'serial_no',
            {rules: [{ required: true, message: '请输入商品分类序列号!!' }]}
          ]"
          placeholder="请输入商品分类的序列号..."
        ></a-input>
      </a-form-item>
      <a-form-item
        :wrapper-col="{ span: 12, offset: 9 }"
      >
        <a-button
          type="primary"
          html-type="submit"
        >
          保存
        </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { saveCategory } from '@/api/goodsCategory'
export default {
  name: 'NewCommodityCategory',
  data () {
    return {
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  mounted () {
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          saveCategory(values)
            .then((res) => {
              if (res) { this.$message.success('新增商品分类成功！') }
              this.$router.push({ path: 'goods-category-list' })
            })
            .catch((err) => {
              console.log(err)
              this.$message.error('新增商品分类失败！')
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
